<template>
    <el-dialog :model-value="dialogVisible" :close-on-click-modal="true" :before-close="handleClose" :title="isAdd === 'add' ? '新增账户' : '修改账户'" append-to-body width="620px">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="公司" prop="bizOrgData">
                <el-select
                    v-model="form.bizOrgData"
                    filterable
                    remote
                    reserve-keyword
                    :disabled="isAdd !== 'add'"
                    placeholder="请选择公司"
                    :remote-method="getCompanyOptions"
                    :loading="loading"
                    @change="initbizOrgData"
                    class="w100p"
                >
                    <el-option
                    v-for="item in CompanyOptions"
                    :key="item"
                    :label="item.fullName"
                    :value="item"
                    >
                    </el-option>
                </el-select>             
            </el-form-item>
            <el-form-item label="账户名称" prop="accountName">
                <el-input v-model="form.accountName" placeholder="请输入账户名称"  class="w100p"/>
            </el-form-item>
            <el-form-item label="账号" prop="bankAccountNo">
                <el-input v-model="form.bankAccountNo" placeholder="请输入账号"  class="w100p"/>
            </el-form-item>
            <el-form-item label="科目" prop="acctTitleName">
                <el-input v-model="form.acctTitleName" placeholder="请输入科目"  class="w100p"/>
            </el-form-item>
            <el-form-item label="所属银行" prop="bankNameData">
                <el-select
                    v-model="form.bankNameData"
                    filterable
                    remote
                    clearable
                    reserve-keyword
                    placeholder="请输入所属银行"
                    :remote-method="getAllBanksOptions"
                    :loading="loading"
                    @change="initbankNameData"
                     class="w100p"
                >
                    <el-option
                    v-for="item in BanksOptions"
                    :key="item"
                    :label="item.bankName"
                    :value="item"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开户行" prop="bankFullName">
                <el-select
                    v-model="form.bankFullName"
                    filterable
                    remote
                    clearable
                    reserve-keyword
                    placeholder="请输入开户行"
                    :remote-method="getNetBanksOptions"
                    :loading="loading"
                     class="w100p"
                >
                    <el-option
                    v-for="item in NetBanksOptions"
                    :key="item.bankName"
                    :label="item.bankName"
                    :value="item.bankName"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="利润中心" prop="profitCenterData">
                <el-select
                    v-model="form.profitCenterData"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入利润中心"
                    :remote-method="getProfitCenterOptions"
                    :loading="loading"
                    @change="initprofitCenterData"
                    class="w100p"
                >
                    <el-option
                    v-for="item in ProfitCenterOptions"
                    :key="item.profitCenterCode"
                    :label="item.profitCenterName"
                    :value="item"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="账户类型" prop="accountType">
                <el-radio-group v-model="form.accountType">
                    <el-radio label="payee">收款账户</el-radio>
                    <el-radio label="payer">付款账户</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item style="margin-top:-15px">
                <el-checkbox v-model="form.defaultAccount" label="是否默认账户" :disabled="isAdd !== 'add'" size="large" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button :loading="loading" type="primary" @click="submit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script  setup>
import api from '@/api/index'
import { ElMessage } from 'element-plus'
import { nextTick, watch } from 'vue'
// eslint-disable-next-line no-unused-vars
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    isAdd: {
        type: String,
        default: 'add'
    },
    formData: {
        type: Object,
        default: ()=>{}
    }
})

watch(() => props.dialogVisible,(newVal) => {
    if(newVal){
        if(props.isAdd === 'add'){
            form.value = {
                defaultAccount: false
            }
        }else{
            form.value = {...props.formData}
            form.value.bizOrgCode = form.value.bizOrgCode
            form.value.profitCenterData = form.value.profitCenterName
            form.value.bankNameData = form.value.bankName
            form.value.bizOrgData = form.value.bizOrgName
        }
    }
})

const emit = defineEmits(['on-submit', 'handleClose'])
const formRef = ref(null)
const form = ref({
    defaultAccount: false
})
const options = ref([])
const newBizOrgCode = ref('')
const CompanyOptions = ref([])
const SubjectOptions = ref([])
const BanksOptions = ref([])
const NetBanksOptions = ref([])
const ProfitCenterOptions = ref([])
const filterData = ref({})
const CompanyProps = {
    checkStrictly: true,
    value: 'orgCode',
    label: 'fullName'
}
const rules = reactive({
    bizOrgData: [
        {
            required: true,
            message: '请选择公司',
            trigger: 'blur'
        }
    ],
    accountName: [
        {
            required: true,
            message: '请输入账户名称',
            trigger: 'blur'
        }
    ],
    bankAccountNo: [
        {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
        }
    ],
    acctTitleName: [
        {
            required: true,
            message: '请输入科目',
            trigger: 'blur'
        }
    ],
    bankNameData: [
        {
            required: true,
            message: '请输入所属银行',
            trigger: 'blur'
        }
    ],
    bankFullName: [
        {
            required: true,
            message: '请输入开户行',
            trigger: 'blur'
        }
    ],
    profitCenterData: [
        {
            required: true,
            message: '请输入利润中心',
            trigger: 'blur'
        }
    ],
    accountType: [
        {
            required: true,
            message: '请选择账户类型',
            trigger: 'blur'
        }
    ]
})
const loading = ref(false)

const getAllBanksOptions = (query) => {
  if (query) {
      const params = {
          bankName: query,
          topCount: 10
      }
    api.dataMaintenance.getBanksList(params).then((res)=>{
        BanksOptions.value = res || []
    })
  } else {
    BanksOptions.value = []
  }
}

const getCompanyOptions = (query)=>{
    if (query) {
        const params = {
            orgCodeOrName: query,
            pageNum: 1,
            pageSize: 10
        }
        api.dataMaintenance.getOrgTreeList(params).then((res)=>{
            CompanyOptions.value = res.list || []
        })
    } else {
        CompanyOptions.value = []
    }
}

const getSubjectOptions = (query) => {
  if (query) {
      const params = {
          subjectCodeOrName: query,
          pageNum: 1,
          pageSize: 10
      }
    api.dataMaintenance.getSubjectList(params).then((res)=>{
        SubjectOptions.value = res.list || []
    })
  } else {
    SubjectOptions.value = []
  }
}

const getNetBanksOptions = (query) => {
    if(form.value.bankNameData){
        if (query) {
            const params = {
                parentId: form.value.bankNameData.id,
                bankName: query,
                topCount: 10
            }
            api.dataMaintenance.getNetBanksList(params).then((res)=>{
                NetBanksOptions.value = res || []
            })
        } else {
            NetBanksOptions.value = []
        }
    }else{
        ElMessage({
            type: 'error',
            message: '请先输入银行!'
        });
    }
}

const getProfitCenterOptions = (query) => {
  if (query) {
      const params = {
          profitName: query,
          topCount: 10
      }
    api.dataMaintenance.getProfitCenterList(params).then((res)=>{
        ProfitCenterOptions.value = res || []
    })
  } else {
    ProfitCenterOptions.value = []
  }
}

const handleClose = () => {
    formRef.value.resetFields()
    emit('handleClose',false)
}
const newCompany = (data = []) => {
    data.forEach((item)=>{
        if(item.orgCode === newBizOrgCode.value){
            filterData.value = item
        }else if(item.children && Array.isArray(item.children)){
            newCompany(item.children)
        }
    }) 
} 

const initbizOrgData = (data)=>{
    form.value.bizOrgCode = data.orgCode
    form.value.bizOrgId = data.id
    form.value.bizOrgName = data.fullName
}


const initbankNameData = (data)=>{
    form.value.bankName = data.bankName
    form.value.bankFullName = ''
    NetBanksOptions.value = []
}

const initprofitCenterData = (data)=>{
    form.value.profitCenterCode = data.profitCenterCode
    form.value.profitCenterName = data.profitCenterName
}

const submit = () => {
    if (!formRef) return
    formRef.value.validate(valid => {
        if (valid) {
            emit('on-submit', {...form.value})
            handleClose()
        } else {
            return false
        }
    })

}

</script>

<style lang="scss" scoped>
.dialog-footer{
    text-align: right;
}
</style>
